<template>
  <div class="registerForm">
    <el-form ref="form" :model="form" :rules="rules" status-icon>
      <el-form-item prop="username">
        <el-input placeholder="用户名/手机号" v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item prop="captcha">
        <el-input placeholder="验证码" v-model="form.captcha">
          <template slot="append">
            <span @click="sendCode">发送验证码</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item prop="nickname">
        <el-input placeholder="昵称" v-model="form.nickname"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input placeholder="密码" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input placeholder="确认密码" v-model="form.checkPass"></el-input>
      </el-form-item>
    </el-form>
    <el-button type="primary" class="regbtn" @click="register">注册</el-button>
  </div>
</template>

<script>
export default {
  data() {
    // rule:校验规则
    // value：当前的表单元素的值，如果是校验验证密码，那么value就是用户输入的校验密码的值
    // callback：校验之后的处理函数
    var validatePass = (rule, value, callback) => {
      // 还可以使用返回promise的方式来实现验证
      // return new Promise((resolve,reject) => {
      //     if(value !== this.form.password){
      //         reject(new Error("请输入确认密码"));
      //     }else{
      //         resolve()
      //     }
      // })
      if (value !== this.form.password) {
        callback(new Error("请输入确认密码"));
      } else {
        callback();
      }
    };
    return {
      form: {
        username: "",
        nickname: "",
        captcha: "",
        password: "",
        checkPass: "",
      },
      rules: {
        username: [
          {
            required: true,
            message: "请输入用户名或者手机号",
            trigger: "blur",
          },
        ],
        nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],
        captcha: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        checkPass: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  methods: {
    // 注册
    register() {
      // 后台接口只需要四个参数，而form中有五个参数，所以使用解构的方式拿到后台所需要的参数
      let { checkPass, ...props } = this.form;
      console.log(props);
      this.$axios({
        method: "post",
        url: "/accounts/register",
        data: props,
      }).then((res) => {
        console.log(res);
        // 提示
        this.$confirm("注册成功", "提示", {
          confirmButtonText: "确定", //确认按钮文本
          cancelButtonText: "取消", //取消按钮文本
          type: "success",
        }).then(() => {
          // 自动切换到登陆
          this.$emit('goLogin')
        });
      })
      // .catch(err => {
      //   console.dir(err)
      //   if(err.response.data.statusCode == 400){
      //     this.$message.error(err.response.data.message)
      //   }
      // })
    },
    sendCode() {
      // 验证手机号是否格式正确，只有手机号正确，才能接收到服务器发回的验证码
      if (/^1\d{10}$/.test(this.form.username)) {
        this.$axios({
          method: "post",
          url: "/captchas",
          data: { tel: this.form.username },
        }).then((res) => {
          console.log(res);
          this.$confirm("本次验证码为：" + res.data.code, "提示", {
            confirmButtonText: "确定", //确认按钮文本
            cancelButtonText: "取消", //取消按钮文本
            type: "success",
          });
        });
      } else {
        // 消息确认框
        this.$confirm("你所输入的手机号格式不正确", "提示", {
          confirmButtonText: "确定", //确认按钮文本
          cancelButtonText: "取消", //取消按钮文本
          type: "warning",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.registerForm {
  padding: 20px;
  .regbtn {
    width: 100%;
  }
}
</style>